{% extends "base.html" %}

{% block title %}经纬度分析 - {{ super() }}{% endblock %}

{% block content %}
    <!-- 查询条件区域 -->
    <div class="bg-white rounded-xl shadow-sm border border-slate-200 p-6 mb-6">
        <h3 class="text-lg font-semibold text-slate-800 mb-4">查询条件</h3>
        
        <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-4 mb-4">
            <!-- 区域选择 -->
            <div>
                <label class="block text-sm font-medium text-slate-700 mb-2">区域</label>
                <div class="flex space-x-2">
                    <select class="flex-1 px-4 py-2 border border-slate-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-indigo-500">
                        <option>全部区县</option>
                        <option>福田区</option>
                        <option>罗湖区</option>
                        <option>南山区</option>
                        <option>宝安区</option>
                        <option>龙岗区</option>
                    </select>
                    <select class="flex-1 px-4 py-2 border border-slate-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-indigo-500">
                        <option>全部街道</option>
                        <option>梅林街道</option>
                        <option>华强北街道</option>
                        <option>沙河街道</option>
                    </select>
                </div>
            </div>

            <!-- 污染类型 -->
            <div>
                <label class="block text-sm font-medium text-slate-700 mb-2">污染类型</label>
                <select class="w-full px-4 py-2 border border-slate-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-indigo-500">
                    <option>全部类型</option>
                    <option>空气污染</option>
                    <option>水污染</option>
                    <option>土壤污染</option>
                    <option>噪音污染</option>
                    <option>市容管理</option>
                </select>
            </div>

            <!-- 时间范围 -->
            <div>
                <label class="block text-sm font-medium text-slate-700 mb-2">时间范围</label>
                <select class="w-full px-4 py-2 border border-slate-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-indigo-500">
                    <option>本月</option>
                    <option>上月</option>
                    <option>本季度</option>
                    <option>全部</option>
                    <option>自定义</option>
                </select>
            </div>

            <!-- 分析模式 -->
            <div>
                <label class="block text-sm font-medium text-slate-700 mb-2">分析模式</label>
                <select class="w-full px-4 py-2 border border-slate-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-indigo-500">
                    <option>热力图</option>
                    <option>聚类分析</option>
                    <option>密度分析</option>
                    <option>趋势分析</option>
                </select>
            </div>
        </div>

        <!-- 搜索和操作按钮 -->
        <div class="flex items-center justify-between">
            <div class="flex-1 max-w-md">
                <div class="relative">
                    <i class="fas fa-search absolute left-3 top-1/2 transform -translate-y-1/2 text-slate-400"></i>
                    <input type="text" placeholder="搜索地址、位置等..." class="w-full pl-10 pr-4 py-2 border border-slate-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-indigo-500">
                </div>
            </div>
            <div class="flex space-x-3 ml-4">
                <button class="px-6 py-2 bg-indigo-600 text-white rounded-lg hover:bg-indigo-700 transition-colors">
                    <i class="fas fa-search mr-2"></i>查询
                </button>
                <button class="px-6 py-2 border border-slate-300 rounded-lg hover:bg-slate-50 transition-colors">
                    <i class="fas fa-redo mr-2"></i>重置
                </button>
            </div>
        </div>
    </div>

    <!-- 统计卡片 -->
    <div class="grid grid-cols-1 md:grid-cols-4 gap-6 mb-6">
        <div class="bg-white rounded-xl shadow-sm border border-slate-200 p-6">
            <div class="flex items-center justify-between">
                <div>
                    <p class="text-sm text-slate-600">总信访点</p>
                    <p class="text-2xl font-bold text-slate-800">1,234</p>
                </div>
                <div class="w-12 h-12 bg-blue-100 rounded-lg flex items-center justify-center">
                    <i class="fas fa-map-marker-alt text-blue-600 text-xl"></i>
                </div>
            </div>
        </div>
        <div class="bg-white rounded-xl shadow-sm border border-slate-200 p-6">
            <div class="flex items-center justify-between">
                <div>
                    <p class="text-sm text-slate-600">高发区域</p>
                    <p class="text-2xl font-bold text-slate-800">12</p>
                </div>
                <div class="w-12 h-12 bg-red-100 rounded-lg flex items-center justify-center">
                    <i class="fas fa-exclamation-triangle text-red-600 text-xl"></i>
                </div>
            </div>
        </div>
        <div class="bg-white rounded-xl shadow-sm border border-slate-200 p-6">
            <div class="flex items-center justify-between">
                <div>
                    <p class="text-sm text-slate-600">平均密度</p>
                    <p class="text-2xl font-bold text-slate-800">3.2</p>
                </div>
                <div class="w-12 h-12 bg-green-100 rounded-lg flex items-center justify-center">
                    <i class="fas fa-chart-line text-green-600 text-xl"></i>
                </div>
            </div>
        </div>
        <div class="bg-white rounded-xl shadow-sm border border-slate-200 p-6">
            <div class="flex items-center justify-between">
                <div>
                    <p class="text-sm text-slate-600">覆盖面积</p>
                    <p class="text-2xl font-bold text-slate-800">89%</p>
                </div>
                <div class="w-12 h-12 bg-purple-100 rounded-lg flex items-center justify-center">
                    <i class="fas fa-map text-purple-600 text-xl"></i>
                </div>
            </div>
        </div>
    </div>

    <!-- 地图和分析区域 -->
    <div class="grid grid-cols-1 lg:grid-cols-3 gap-6">
        <!-- 地图区域 -->
        <div class="lg:col-span-2">
            <div class="bg-white rounded-xl shadow-sm border border-slate-200">
                <div class="p-6 border-b border-slate-200">
                    <div class="flex items-center justify-between">
                        <h3 class="text-lg font-semibold text-slate-800">地理分布图</h3>
                        <div class="flex items-center space-x-2">
                            <button class="px-3 py-1 text-sm bg-indigo-100 text-indigo-700 rounded-lg hover:bg-indigo-200 transition-colors">
                                <i class="fas fa-layer-group mr-1"></i>图层
                            </button>
                            <button class="px-3 py-1 text-sm bg-green-100 text-green-700 rounded-lg hover:bg-green-200 transition-colors">
                                <i class="fas fa-expand mr-1"></i>全屏
                            </button>
                        </div>
                    </div>
                </div>
                <div class="p-6">
                    <div id="map" class="h-96 bg-slate-100 rounded-lg flex items-center justify-center">
                        <div class="text-center">
                            <i class="fas fa-map-marked-alt text-4xl text-slate-400 mb-2"></i>
                            <p class="text-slate-500">地图加载中...</p>
                        </div>
                    </div>
                </div>
            </div>
        </div>

        <!-- 分析面板 -->
        <div class="space-y-6">
            <!-- 区域排行 -->
            <div class="bg-white rounded-xl shadow-sm border border-slate-200">
                <div class="p-6 border-b border-slate-200">
                    <h3 class="text-lg font-semibold text-slate-800">区域排行</h3>
                </div>
                <div class="p-6">
                    <div class="space-y-4">
                        <div class="flex items-center justify-between">
                            <div class="flex items-center space-x-3">
                                <span class="w-6 h-6 bg-red-500 text-white text-xs rounded-full flex items-center justify-center">1</span>
                                <span class="text-sm font-medium text-slate-800">南山区</span>
                            </div>
                            <span class="text-sm text-slate-600">234件</span>
                        </div>
                        <div class="flex items-center justify-between">
                            <div class="flex items-center space-x-3">
                                <span class="w-6 h-6 bg-orange-500 text-white text-xs rounded-full flex items-center justify-center">2</span>
                                <span class="text-sm font-medium text-slate-800">福田区</span>
                            </div>
                            <span class="text-sm text-slate-600">189件</span>
                        </div>
                        <div class="flex items-center justify-between">
                            <div class="flex items-center space-x-3">
                                <span class="w-6 h-6 bg-yellow-500 text-white text-xs rounded-full flex items-center justify-center">3</span>
                                <span class="text-sm font-medium text-slate-800">宝安区</span>
                            </div>
                            <span class="text-sm text-slate-600">156件</span>
                        </div>
                        <div class="flex items-center justify-between">
                            <div class="flex items-center space-x-3">
                                <span class="w-6 h-6 bg-green-500 text-white text-xs rounded-full flex items-center justify-center">4</span>
                                <span class="text-sm font-medium text-slate-800">罗湖区</span>
                            </div>
                            <span class="text-sm text-slate-600">134件</span>
                        </div>
                        <div class="flex items-center justify-between">
                            <div class="flex items-center space-x-3">
                                <span class="w-6 h-6 bg-blue-500 text-white text-xs rounded-full flex items-center justify-center">5</span>
                                <span class="text-sm font-medium text-slate-800">龙岗区</span>
                            </div>
                            <span class="text-sm text-slate-600">98件</span>
                        </div>
                    </div>
                </div>
            </div>

            <!-- 污染类型分布 -->
            <div class="bg-white rounded-xl shadow-sm border border-slate-200">
                <div class="p-6 border-b border-slate-200">
                    <h3 class="text-lg font-semibold text-slate-800">污染类型分布</h3>
                </div>
                <div class="p-6">
                    <canvas id="pollutionChart" width="300" height="200"></canvas>
                </div>
            </div>

            <!-- 时间趋势 -->
            <div class="bg-white rounded-xl shadow-sm border border-slate-200">
                <div class="p-6 border-b border-slate-200">
                    <h3 class="text-lg font-semibold text-slate-800">时间趋势</h3>
                </div>
                <div class="p-6">
                    <canvas id="trendChart" width="300" height="150"></canvas>
                </div>
            </div>
        </div>
    </div>

    <!-- 详细数据表格 -->
    <div class="bg-white rounded-xl shadow-sm border border-slate-200 mt-6">
        <div class="p-6 border-b border-slate-200">
            <div class="flex items-center justify-between">
                <h3 class="text-lg font-semibold text-slate-800">详细数据</h3>
                <button class="px-4 py-2 bg-indigo-600 text-white rounded-lg hover:bg-indigo-700 transition-colors">
                    <i class="fas fa-download mr-2"></i>导出数据
                </button>
            </div>
        </div>
        <div class="overflow-x-auto">
            <table class="w-full">
                <thead class="bg-slate-50">
                    <tr>
                        <th class="text-left p-4 font-semibold text-slate-700">位置</th>
                        <th class="text-left p-4 font-semibold text-slate-700">经纬度</th>
                        <th class="text-left p-4 font-semibold text-slate-700">信访数量</th>
                        <th class="text-left p-4 font-semibold text-slate-700">主要问题</th>
                        <th class="text-left p-4 font-semibold text-slate-700">风险等级</th>
                        <th class="text-left p-4 font-semibold text-slate-700">操作</th>
                    </tr>
                </thead>
                <tbody class="divide-y divide-slate-200">
                    <tr class="hover:bg-slate-50">
                        <td class="p-4">
                            <div>
                                <p class="font-medium text-slate-800">南山区科技园</p>
                                <p class="text-xs text-slate-500">科技园片区</p>
                            </div>
                        </td>
                        <td class="p-4">
                            <div>
                                <p class="text-sm text-slate-600">22.5455°N</p>
                                <p class="text-sm text-slate-600">113.9308°E</p>
                            </div>
                        </td>
                        <td class="p-4">
                            <span class="text-lg font-semibold text-indigo-600">45</span>
                        </td>
                        <td class="p-4">
                            <span class="px-2 py-1 bg-red-100 text-red-700 text-xs rounded-full">空气污染</span>
                        </td>
                        <td class="p-4">
                            <span class="px-2 py-1 bg-red-100 text-red-700 text-xs rounded-full">高风险</span>
                        </td>
                        <td class="p-4">
                            <button class="text-indigo-600 hover:text-indigo-800 text-sm">
                                <i class="fas fa-eye mr-1"></i>查看
                            </button>
                        </td>
                    </tr>
                    <tr class="hover:bg-slate-50">
                        <td class="p-4">
                            <div>
                                <p class="font-medium text-slate-800">福田区中心区</p>
                                <p class="text-xs text-slate-500">华强北片区</p>
                            </div>
                        </td>
                        <td class="p-4">
                            <div>
                                <p class="text-sm text-slate-600">22.5329°N</p>
                                <p class="text-sm text-slate-600">114.0579°E</p>
                            </div>
                        </td>
                        <td class="p-4">
                            <span class="text-lg font-semibold text-indigo-600">38</span>
                        </td>
                        <td class="p-4">
                            <span class="px-2 py-1 bg-orange-100 text-orange-700 text-xs rounded-full">噪音污染</span>
                        </td>
                        <td class="p-4">
                            <span class="px-2 py-1 bg-yellow-100 text-yellow-700 text-xs rounded-full">中风险</span>
                        </td>
                        <td class="p-4">
                            <button class="text-indigo-600 hover:text-indigo-800 text-sm">
                                <i class="fas fa-eye mr-1"></i>查看
                            </button>
                        </td>
                    </tr>
                    <tr class="hover:bg-slate-50">
                        <td class="p-4">
                            <div>
                                <p class="font-medium text-slate-800">宝安国际机场</p>
                                <p class="text-xs text-slate-500">机场周边</p>
                            </div>
                        </td>
                        <td class="p-4">
                            <div>
                                <p class="text-sm text-slate-600">22.6393°N</p>
                                <p class="text-sm text-slate-600">113.8111°E</p>
                            </div>
                        </td>
                        <td class="p-4">
                            <span class="text-lg font-semibold text-indigo-600">32</span>
                        </td>
                        <td class="p-4">
                            <span class="px-2 py-1 bg-blue-100 text-blue-700 text-xs rounded-full">噪音污染</span>
                        </td>
                        <td class="p-4">
                            <span class="px-2 py-1 bg-yellow-100 text-yellow-700 text-xs rounded-full">中风险</span>
                        </td>
                        <td class="p-4">
                            <button class="text-indigo-600 hover:text-indigo-800 text-sm">
                                <i class="fas fa-eye mr-1"></i>查看
                            </button>
                        </td>
                    </tr>
                </tbody>
            </table>
        </div>
    </div>
{% endblock %}

{% block page_scripts %}
<script src="{{ url_for('static', filename='js/coordinate-analysis.js') }}"></script>
{% endblock %}